@use "sass:math";
@use "sass:map";

// {VueAndNvueStyleAttr}
@use "../mixin/_fonction.scss" as function;




// 类型枚举
$types1: primary, success, warning, error, info;

// https://sass-lang.com/documentation/values/maps#immutability
// 主题颜色
// map.deep-merge将递归合并两个map变量，两个map变量的相同键值所映射的对象也会进行合并
$colors: () !default;
$colors: map.deep-merge(
  (
    "white": #ffffff,
    "black": #000000,
    "primary": (
      "base": #3c9cff,
    ),
    "success": (
      "base": #5ac725,
    ),
    "warning": (
      "base": #f9ae3d,
    ),
    "error": (
      "base": #f56c6c,
    ),
    "info": (
      "base": #909399,
    ),
  ),
  $colors
);



$color-white: map.get($colors, "white") !default;
$color-black: map.get($colors, "black") !default;
$color-primary: map.get($colors, "primary", "base") !default;
$color-success: map.get($colors, "success", "base") !default;
$color-warning: map.get($colors, "warning", "base") !default;
$color-error: map.get($colors, "error", "base") !default;
$color-info: map.get($colors, "info", "base") !default;

// mix color with white
// 白天模式下的颜色方案
@mixin set-color-type-light($type, $number) {
  $colors: map.deep-merge(
    (
      $type: (
        "light-#{$number}":
          mix(
            $color-white,
            map.get($colors, $type, "base"),
            math.percentage(math.div($number, 10))
          ),
      ),
    ),
    $colors
  ) !global;
}

// mix color with black
// 颜色混入黑色
@mixin set-color-type-dark($type, $number) {
  $colors: map.deep-merge(
    (
      $type: (
        "dark-#{$number}":
          mix(
            $color-black,
            map.get($colors, $type, "base"),
            math.percentage(math.div($number, 10))
          ),
      ),
    ),
    $colors
  ) !global;
}

// $colors.primary.light-i
// --e-color-primary-light-i
// 10% 53a8ff
// 20% 66b1ff
// 30% 79bbff
// 40% 8cc5ff
// 50% a0cfff
// 60% b3d8ff
// 70% c6e2ff
// 80% d9ecff
// 90% ecf5ff
// @for $i from 1 through 9 {
//   @each $type in $types1 {
//     @include set-color-type-light($type, $i);
//   }
// }

// --e-color-primary-dark-2
@each $type in $types1 {
  @include set-color-type-dark($type, 2);
}

$border-color: () !default;
// 颜色从上往下，由深到浅
$border-color: map.merge(
  (
    "darker": #cdd0d6,
    "dark": #d4d7de,
    "": #dadbde,
    "light": #e4e7ed,
    "lighter": #ebeef5,
    "extra-light": #f2f6fc,
  ),
  $border-color
);
$text-color: () !default;
$text-color: map.merge(
  (
    "primary": #303133,
    "regular": #606266,
    "secondary": #909193,
    "disabled": #c8c9cc,
    "error": map.get($colors, "error", "base"),
  ),
  $text-color
);
$fill-color: () !default;
// 颜色从上往下，由深到浅
$fill-color: map.merge(
  (
    "darker": #e6e8eb,
    "dark": #ebedf0,
    "": #f0f2f5,
    "light": #f5f7fa,
    "lighter": #fafafa,
    "extra-light": #fafcff,
    "blank": #ffffff,
  ),
  $fill-color
);
// Background
$bg-color: () !default;
$bg-color: map.merge(
  (
    "": #f3f4f6,
    "page": #f3f4f6,
    "overlay": #f3f4f6,
  ),
  $bg-color
);
// Background
$bg-color1: () !default;
$bg-color1: map.merge(
  (
    "": #f3f4f6
  ),
  $bg-color1
);
// Disable
$disabled: () !default;
$disabled: map.merge(
  (
    "opacity": 0.5,
  ),
  $disabled
);

// 组件不同大小下的高度，用于radio、input、button组件
$common-component-size: () !default;
$common-component-size: map.merge(
  (
    "large": 50px,
    "normal": 40px,
    "small": 30px,
    "mini": 22px,
  ),
  $common-component-size
);

// 字体
$font-size: () !default;
$font-size: map.merge(
  (
    "large": 32rpx,
    "normal": 28rpx,
    "small": 24rpx,
  ),
  $font-size
);

// 边框
$border-width: 1px !default;
$border-style: solid !default;
$border-color-hover:  map.get($text-color, "disabled") !default;
$border-radius: () !default;
$border-radius: map.merge(
  (
    "square": 3px,
    "circle": 100px,
  ),
  $border-radius
);

// Input
$input: () !default;
$input: map.merge(
  (
    "border-color": #dadbde,
    "border-width": 0.5px,
    "border-style": $border-style,
    "padding": 6px 9px,
	"font-size":30rpx,
	"height":48rpx,
	"line-height":52rpx,
	"color": map.get($text-color, "primary") 
  ),
  $input
);

// Select
$select: () !default;
$select: map.merge(
  (
	"bg-color": $color-white,
	"border-radius": 5px,
  ),
  $select
);
$option: () !default;
$option: map.merge(
  (
	"font-size": 24rpx,
	"color": $color-black,
	"padding": 0 10px,
  ),
  $option
);

// Button
$button: () !default;
$button: map.merge(
  (
	"active-opacity":0.75,
  	"default-text-color":#fff,
    "disabled-opacity":  map.get($disabled,"opacity"),
    "radius-circle": map.get($border-radius, "circle"),
    "radius-square": map.get($border-radius, "square"),
    "border-width": $border-width,
    "border-style": $border-style,
  ),
  $button
);
$button-padding-horizontal: () !default;
$button-padding-horizontal: map.merge(
  (
    "large": 30rpx,
    "normal": 24rpx,
    "small": 16rpx,
    "mini": 16rpx,
  ),
  $button-padding-horizontal
);

$button-font-size: () !default;
$button-font-size: map.merge(
  (
    "large":  map.get($font-size, "large"),
    "normal":  map.get($font-size, "normal"),
    "small":  map.get($font-size, "small"),
    "mini": 20rpx,
  ),
  $button-font-size
);
$button-height: () !default;
$button-height: map.merge($common-component-size, $button-height);

// Form
$form-item: () !default;
$form-item: map.merge(
  (
    "padding": 10px 0px,
  ),
  $form-item
);

// Avatar
$avatar: () !default;
$avatar: map.merge(
  (
    "text-color":  map.get($colors,"white"),
    "bg-color":  map.get($text-color, "disabled"),
    "text-size": 28rpx,
    "icon-size": 36rpx,
    "border-radius":  map.get($border-radius,"circle"),
  ),
  $avatar
);

$avatar-size: () !default;
$avatar-size: map.merge(
  (
    "large": 56px,
    "default": 40px,
    "small": 24px,
  ),
  $avatar-size
);

// Badge
$badge: () !default;
$badge: map.merge(
  (
    "color":#fff,
    "radius": 100px,
    "font-size": 22rpx,
    "padding": 2px 5px,
    "dot-size": 8px,
  ),
  $badge
);

@each $type in $types1 {
    $badge: map.deep-merge(
      (
        "#{$type}-background-color": map.get($colors,$type,"base"),
      ),
      $badge
    ) !global;
  }

// Popup
$popup: () !default;
$popup: map.merge(
  (
    "modal-bg-color":  map.get($colors,"black"),
    "modal-opacity": 0.5,
  ),
  $popup
);

// calendar
$calendar: () !default;
$calendar: map.merge(
  (
    "header-padding": 16px 0,
    "week-color": map.get($text-color, "primary"),
    "hide-color": #b2b2b2,
    "active-background-color":  map.get($colors, "primary","base"),
    "active-color": #fff,
    "active-size": 24px,
    "active-radius": 100%,
    "font-size": 12px,
  ),
  $calendar
);


$cell: () !default;
$cell: map.merge(
  (
    "font-size": 15px,
    "line-height": 24px,
    "icon-size": 16px,
    "title-font-size": 15px,
    "title-line-height": 24px
  ),
  $cell
);
$cell-group: () !default;
$cell-group: map.merge(
  (
    "line-height": 16px,
    "title-font-size": 15px,
  ),
  $cell-group
);


// Switch
$switch: () !default;
$switch: map.merge(
  (
    "on-bg": $color-white,
    "off-bg": $color-white,
  ),
  $switch
);

// Tabs
$tabs: () !default;
$tabs: map.merge(
  (
    "font-size": 30rpx,
  ),
  $tabs
);

// transition

$transition-duration: () !default;
$transition-duration: map.merge(
  (
    "": 0.3s,
    "fast": 0.2s,
  ),
  $transition-duration
);

$transition-function: () !default;
$transition-function: map.merge(
  (
    "ease-in-out-bezier": cubic-bezier(0.645, 0.045, 0.355, 1),
    "fast-bezier": cubic-bezier(0.23, 1, 0.32, 1),
  ),
  $transition-function
);
$transition: () !default;
$transition: map.merge(
  (
    "all": all  map.get($transition-duration,"")
       map.get($transition-function,"ease-in-out-bezier"),
    "fade": opacity  map.get($transition-duration,"")
       map.get($transition-function,"fast-bezier"),
    "md-fade": (
      transform  map.get($transition-duration,"")
         map.get($transition-function,"fast-bezier"),
      opacity  map.get($transition-duration,"")
         map.get($transition-function,"fast-bezier"),
    ),
    "fade-linear": opacity  map.get($transition-duration,"fast") linear,
    "border": border-color  map.get($transition-duration,"fast")
       map.get($transition-function,"ease-in-out-bezier"),
    "box-shadow": box-shadow  map.get($transition-duration,"fast")
       map.get($transition-function,"ease-in-out-bezier"),
    "color": color  map.get($transition-duration,"fast")
       map.get($transition-function,"ease-in-out-bezier"),
  ),
  $transition
);


// search
$search: () !default;
$search: map.merge(
  (
    "padding": 0 10px,
	"label-color": map.get($text-color, "primary"),
	"label-font-size":14px,
	"label-margin": 0 4px,
	"close-size":20px,
	"close-radius":100px,
	"close-bgColor": #C6C7CB,
	"close-transform":scale(0.82),
	"font-size": 14px,
	"margin": 0 5px,
	"color": map.get($text-color, "primary"),
	"action-font-size": 14px,
	"action-color":  map.get($text-color, "primary"),
	"action-width": 0,
	"action-active-width": 40px,
	"action-margin-left": 5px
  ),
  $search
);
// modal
$modal: () !default;
$modal: map.merge(
  (
    "radius":6px,
	"title-color": map.get($text-color, "regular"),
	"title-font-size":16px,
	"content-color": map.get($text-color, "regular"),
	"button-font-size":16px
  ),
  $modal
);
// dropdown-menu-item
$dropdown-menu-item: () !default;
$dropdown-menu-item: map.merge(
  (
    "height":44px,
	"padding":0 10px
  ),
  $dropdown-menu-item
);
// navbar
$navbar: () !default;
$navbar: map.merge(
  (
    "z-index":980
  ),
  $navbar
);
// overlay
$overlay: () !default;
$overlay: map.merge(
  (
    "background-color":rgba(0, 0, 0, 0.7)
  ),
  $overlay
);
// sliders
$sliders: () !default;
$sliders: map.merge(
  (
    "color":$color-white
  ),
  $sliders
);

//skeleton
$skeleton: () !default;
$skeleton: map.merge(
  (
  "z-index":10100,
    "bg-color":$color-white,
	"item-bg":linear-gradient(90deg,#f0f2f5 25%,#e6e8eb 37%,#f0f2f5 63%),
	"swiper-height":150px,
	"swiper-round":8px,
	"swiper-dot-bg-color":#f2f2f2,
	"list-avatar-circle":100%,
	"menu-icon-circle":100%,
	"tabbar-icon-circle":100%
  ),
  $skeleton
);
// 组件变量的map
$components-var-map: () !default;
$components-var-map: map.merge(
  (
    "button": $button,
	"input":$input,
	"select":$select,
	"option":$option,
	"form-item":$form-item,
	"avatar":$avatar,
    "badge": $badge,
	"popup":$popup,
    "calendar":$calendar,
    "cell":$cell,
    "cell-group":$cell-group,
    "search":$search,
    "switch":$switch,
    "modal":$modal,
    "dropdown-menu-item":$dropdown-menu-item,
    "navbar":$navbar,
	"tabs":$tabs,
	"transition":$transition,
	"overlay":$overlay,
	"sliders":$sliders,
	"skeleton":$skeleton
	
  ),
  $components-var-map
);
